<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 spb store-box" @click="changeStore">
			<view class="rowbox">
				<image class="store-img" :src="storeList[curStore].logo" mode="aspectFill"></image>
				<view class="store-name">{{storeList[curStore].name||'暂无药房名称'}}</view>
			</view>
			<view class="rowbox def-col change-store">切换药店
				<view style="margin-left: 4rpx;">
					<u-icon name="arrow-right" size="24rpx" color="#00b6b2"></u-icon>
				</view>
			</view>
		</view>
		<view class="columnbox wdh-100 search-box">
			<view class="rowbox search-info spb">
				<view class="rowbox">
					<u-icon name="search" size="40rpx"></u-icon>
					<input style="width: 400rpx;" v-model="name" placeholder="请输入搜索内容" />
				</view>
				<view class="rowbox">
					<view style="margin-right: 20rpx;" @click="refreshInfo" v-if="searchflag">
						<u-icon name="close-circle-fill" size="28rpx"></u-icon>
					</view>
					<view class="rowbox search-btn" @click="searchInfo">搜索</view>
				</view>
			</view>
			<view class="rowbox wdh-100 jus">
				<view @click="setType(index)" :class="{'sel-type':curtype==index}" class="one-type"
					v-for="(item,index) in typeList" :key='index'>{{item.name}}</view>
			</view>
		</view>
		<view v-for="(item,index) in ycList" :key='index' class="one-yc rowbox spb">
			<view>{{item.name}}</view>
			<!-- <view>{{item.price}}/g</view> -->
		</view>
		<view v-if="total==0" style="margin-top: 100rpx;">
			<u-empty text='暂无中药' mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
		<!-- 选择药店 -->
		<u-popup mode="bottom" :show='storeFlag' :duration="100" @close="storeFlag=false" round="20rpx" closeable>
			<view class="shop-c-box">选择药房</view>
			<scroll-view scroll-y style="height: 50vh;">
				<view @click="chooseStore(index)" v-for="(item,index) in storeList" :key='index'
					class="rowbox spb c-one-shop">
					<view class="rowbox">
						<image :src="item.logo" mode="aspectFill" class="shop-img"></image>
						<view class="columnbox als">
							<view>{{item.name||'暂无名称'}}</view>
							<view class="shop-address">{{item.province}}{{item.city}}{{item.county}}</view>
						</view>
					</view>
					<u-icon v-if="index==curStore" name="checkmark-circle-fill" color="#00b6b2" size="40rpx"></u-icon>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeList: [],
				curStore: 0,
				storeFlag: false,
				name: '',
				ycList: [],
				total: 0,
				pageNo: 1,
				searchflag: false
			}
		},
		onLoad() {
			this.getStore()
		},
		onReachBottom() {
			if (this.ycList.length < this.total) {
				this.pageNo++
				this.getYcList()
			}
		},
		methods: {
			refreshInfo() {
				this.pageNo = 1
				this.ycList = []
				this.name = ''
				this.searchflag = false
				this.getYcList()
			},
			searchInfo() {
				this.searchflag = true
				this.pageNo = 1
				this.ycList = []
				this.getYcList()
			},
			chooseStore(index) {
				this.name = ''
				this.searchflag = false
				if (this.curStore != index) {
					this.curStore = index
					this.pageNo = 1
					this.ycList = []
					this.getYcList()
				}
				this.storeFlag = false
			},
			getStore() {
				this.$req.post('/doctor/pharmacys').then(res => {
					this.storeList = res.data.data
					this.getYcList()
				})
			},
			changeStore() {
				this.storeFlag = true
			},
			getYcList() {
				this.$req.post('/doctor/chinesedruglist', {
					pharmacyid: this.storeList[this.curStore].id * 1,
					name: this.searchflag ? this.name : '',
					pageNo: this.pageNo,
					pageSize: 20
				}).then(res => {
					this.ycList = this.ycList.concat(res.data.data.data)
					this.total = res.data.data.totalCount
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
	}

	.store-box {
		padding: 20rpx;
		font-size: 28rpx;
		background: #F5F7F9;

		.change-store {
			margin-left: 20rpx;
		}

		.store-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 4px;
		}

		.store-name {
			margin-left: 20rpx;
		}
	}

	.shop-c-box {
		padding: 32rpx 0;
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;

	}

	.c-one-shop {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-bottom: #F5F7F9 solid 1px;

		.shop-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.shop-address {
			font-size: 24rpx;
			color: #7c7d7d;
			margin-top: 20rpx;
		}
	}

	.search-box {
		padding: 32rpx 36rpx;
		background: #fff;

		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}

	.one-yc {
		font-size: 28rpx;
		padding: 20rpx 0;
		width: 700rpx;
		border-bottom: #F5F7F9 solid 1px;
	}
</style>